<template>
  <div class="search">
    <f-drawer ref="invoiceDrawer" :title="title" width="70%" :show-footer='showFotter' @submit="handleSubmit" @visibleChange="visibleChange">
      <invoice-form ref="form1" v-if="drawerVisible&&current=='form1'" @closeDrawer="closeDrawer"></invoice-form>
      <invoice-details ref="form2" v-if="drawerVisible&&current=='form2'"></invoice-details>
      <invoice-update ref="form3" v-if="drawerVisible&&current=='form3'" @closeDrawer="closeDrawer"></invoice-update>
      <invoice-form4 ref="form4" v-if="drawerVisible&&current=='form4'" @closeDrawer="closeDrawer"></invoice-form4>
    </f-drawer>
  </div>
</template>
<script>
  import InvoiceForm from './invoice_form'
  import InvoiceForm4 from './invoice_form4'
  import InvoiceUpdate from './invoice_update'
  import InvoiceDetails from './invoice_details'

  export default {
    name: 'InvoiceDrawer',
    props: {},
    data() {
      return {
        refs: this.$refs,
        drawerVisible: false,
        showFotter:true,
        isEdit: false,
        title: '',
        current: 'form1',
        formData: {},
        forms: [
          'form1'
        ]
      }
    },
    methods: {
      showDrawer(data, formName) {
        this.formData = data
        this.refs['invoiceDrawer'].show(data)
        this.tabClick(formName)
      },
      handleSubmit(callback) {
        this.refs[this.current].handleSubmit(callback)
      },
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      closeDrawer() {
        this.$emit('success')
        this.$refs.invoiceDrawer.close()
      },
      tabClick(name) {
        this.current = name
        if (this.current === 'form1') {
          this.title = '开票申请'
        }
        if (this.current === 'form2') {
          this.title = '税金单明细'
          this.showFotter=false;
        }
        if (this.current === 'form3') {
          this.title = '编辑开票单'
        }
        this.$nextTick(() => {
          this.refs[this.current].setData(this.formData)
        })
      }
    },
    created() {
    },
    components: { InvoiceDetails,InvoiceForm4, InvoiceForm ,InvoiceUpdate}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
